<template>
	<view>
		<view>
			<!-- <view class="head_box active" :style="{ background: bgcolor }">
				<cu-custom :isBack="false" :bgColor="bgcolor">
					<block slot="content">
						<text class="nav-title">购物</text>
					</block>
				</cu-custom>
			</view> -->
			<view class="content_box">
				<sh-search></sh-search>
				<!--<sh-banner :detail="bannerList" @getbgcolor="getbgcolor"></sh-banner>-->
				<sh-banner :detail="bannerList"></sh-banner>
				
				<view class="uni-swiper-slide-frame">
					<view class="menu-swiper-item tui-flex ">
						<view class="menu-tab-box" v-for="(item, index) in tabList" :key="index">
							<view class="tab-list">
								<image class="tab-img" :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="shopro-selector-rect">{{item.title}}</view>
						</view>
					</view>
				</view>
				
				<view class="tui-mg-bottom">
					<view class="title-box">
						<image class="title-bg" src="http://shopro.7wpp.com/imgs/title2.png" mode="aspectFill"></image>
						<view class="title-text">为你推荐</view>
					</view>
				</view>
				
				<view class="mx20">
					<view class="goods-list tui-flex">
 						<view class="goods-item" v-for="(it, conIdx) in contentList" :key="conIdx">
							<view class="goods-box" @tap="nvTo('/pagesA/product/product?id='+it.id)">
								<view class="img-box">
									<image class="img" :src="it.image" mode="aspectFill"></image>
								</view>
								<view class="goods-title-box">{{it.title}}</view>
								<view class="tui-flex tui-space-between">
									<view>
										<text class="goods-pric-box">￥{{it.pric}}</text>
										<text class="tui-pd-left">/{{it.weight}}</text>
									</view>
									<view>已售: {{it.sold}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue'
	import shSearch from './components/sh-search.vue'
	
	export default {
		name: 'category',
		components: {
			shBanner,
			shSearch
		},
		data() {
			return {
				bgcolor: '',
				bannerList:[],
				tabList: [],
				contentList: [],
                dateForm: {
                    pageNum: 1,
                    pageSize: 3,
                    position: 1
                }
			}
		},
		onLoad() {
			this.getTabData()
		},
		created() {
			
		},
		methods: {
			async getTabData() {
				this.tabList = await this.$api.json('tabList')
				this.contentList = await this.$api.json('contentList')
                this.$api.api('home', this.dateForm).then(res => {
                    this.bannerList = res.data.list
                }).catch(error => {
                    this.$api.msg(error.message)
                });
			},
			// 获取轮播背景色
			getbgcolor(e) {
				// this.bgcolor = e;
			},
			nvTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 标题搜索栏
	.active {
		// 动画时间跟随轮播组件动画时间
		transition: all linear 0.5s;
	}
	.head_box {
		transition: all linear 0.3s;
		/deep/.cuIcon-back {
			display: none;
		}
		.nav-title {
			font-size: $uni-font-size-md;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}
	.content_box {
		.uni-swiper-slide-frame {
			background-color: #fff;
			.menu-swiper-item {
				padding: 30rpx 40rpx;
				justify-content: space-between;
				text-align: center;
				.tab-list {
					.tab-img {
						width: 94rpx;
						height: 94rpx;
					}
				}
				.shopro-selector-rect {
					font-size: 22rpx;
					font-weight: 500;
				}
			}
		}
		.title-box {
			width: 100%;
			height: 88rpx;
			margin: 0 auto;
			position: relative;
			.title-bg {
				width: 100%;
				height: 100%;
			}
			.title-text {
				font-size: 30rpx;
				position: absolute;
				top: 30%;
				left: 42%;
				font-weight: bold;
			}
		}
		.mx20 {
			margin: 0 20rpx 100rpx;
			.goods-list {
				.goods-item {
					margin-right: 4%;
					margin-bottom: 4%;
					width: 48%;
					box-shadow: 0px 0px 5px 2px rgba(199, 199, 199, 0.22);
					border-radius: 10px;
					&:nth-child(2n) {
						margin-right: 0
					}
					.goods-box {
						background: #fff;
						padding-bottom: 20rpx;
						border-radius: 20rpx;
						overflow: hidden;
						.img-box {
							width: 100%;
							height: 100%;
							overflow: hidden;
							position: relative;
							.img {
								width: 100%;
								height: 290rpx;
							}
						}
						.goods-title-box {
							padding: 20rpx 20rpx 10rpx;
							font-size: $uni-font-size-md;
							font-weight: 600;
						}
						.tui-space-between {
							padding: 10rpx 20rpx;
							font-size: $uni-font-size-sm;
							color: #aaa;
							.goods-pric-box {
								font-size: $uni-font-size-lg + 2rpx;
								font-weight: 600;
								color: $uni-color-error;
							}
						}
					}
				}
			}
		}
	}
</style>
